<template>
  <div class="app-container" v-loading="loading">
    <p>监考活动列表</p>
    <hr />
    <div v-for="item in items" :key="item.id">
      <el-row type="flex" justify="end" >
        <el-col :span=24><h4>{{item.ACTIVENAME}}</h4>
          <p>发布部门：{{item.DEPARTMENTNAME}}</p>
          <p>报名开始时间：{{item.SIGNUPSTARTTIME}}</p>
          <p>报名截至时间：{{item.SIGNUPENDTIME}}</p>
          <p>考试开始时间：{{item.EXAMSTARTTIME}}</p>
          <p>考试结束时间：{{item.EXAMENDTIME}}</p>
          <p>考务人员类型：{{item.PERSONNELTYPENAME}}</p>
          <p>年龄不超过：{{item.AGE}}岁</p>
          <p>费用标准：{{item.EXAMINATIONFEE}}</p>
          <p>剩余名额：<b>{{item.PLACELEFT}}</b></p>
          <span>性别要求：</span>
          <el-tag size="medium" type="success" v-if="item.GENDER == '1'">男</el-tag>
          <el-tag size="medium" type="success" v-if="item.GENDER == '2'">女</el-tag>
          <el-tag size="medium" type="success" v-if="item.GENDER == '0'">无要求</el-tag>
          <br />
          <p>备注：{{item.REMARK}}</p>
          <span>可申请教师：</span>
          <el-tag size="medium" type="success">校聘</el-tag>
          <el-tag size="medium" type="success">院聘</el-tag>
          <el-tag size="medium" type="success" v-if="item.CANOFFCAMPUSSIGNUP === 'true'">外校教师</el-tag>
          <el-button v-if="item.CREATEROLEID == '6' || item.CREATEROLEID == '4' " type="primary" size="small" style="float:right;margin-top:0%"
          :disabled="transferToBoolean(item.CANSIGNUP)" @click="showDialog(item.ID, name, item.CREATEROLEID)">{{item.SIGNUP}}</el-button>
          <el-button v-else type="primary" size="small" style="float:right;margin-top:0%"
          :disabled="transferToBoolean(item.CANSIGNUP)" @click="signupExamination(item.ID, name)">{{item.SIGNUP}}</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24"><span><hr></span></el-col>
      </el-row>
    </div>
    <el-dialog
          title="选择监考通知代领教师"
          :visible.sync="noticeProxyDialog"
          width="50%"
          center>
          <el-form :model="tt">
            <span style="color:red">*请从下面列表中选择可以帮你代领监考通知的老师，如没有您熟悉的老师请选择“自行领取”</span>
            <el-form-item label="监考通知代领教师">
              <el-select v-model="noticeProxyCode" placeholder="请选择监考通知代领教师">
                  <el-option v-for="option in teacherOptions" :key="option.value" :value="option.value" :label="option.label"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="noticeProxyDialog = false">取 消</el-button>
            <el-button type="primary" @click="signupExaminationWithNoticeProxy()">确 定</el-button>
          </span>
    </el-dialog>
    <div style="text-align:center" v-if="items.length > 0">已到底线</div>
    <div style="text-align:center" v-else>暂无监考活动</div>
  </div>
</template>

<script>
import { queryExaminationActive, signupExaminationActive } from '@/api/activePublish'
import { mapGetters } from 'vuex'
import { parseTime } from '@/utils'
import axios from 'axios'
export default {
  name: 'queryActive',
  data() {
    return {
      form: {
        active_name: 'dddd',
        signup_start_date: '2018-12-01 9:00',
        signup_end_date: '2018-12-01 9:00',
        exam_start_date: '',
        exam_end_date: '',
        personnel_type: '监考',
        remark: '',
        department_code: '',
        numOfPeaple: '',
        examinationFee: '600/天'
      },
      items: [],
      tt: {},
      loading: false,
      signup: '立即报名',
      canSignup: true,
      noticeProxyDialog: false,
      noticeProxyCode: '',
      teacherOptions: [],
      signupActiveId: '',
      signupTeacherCode: '',
      createRoleId: ''
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles',
      'teacherTypeCode'
    ])
  },
  created: function() {
    this.teacherOptions.push({ value: '', label: '自行领取' })
  },
  mounted: function() {
    this.loading = true
    // console.log(this.name)
    // console.log('teacherType:' + this.teacherTypeCode)
    queryExaminationActive(this.name, this.teacherTypeCode).then(response => {
      if (response.exception) {
        this.processing = false
        this.$message.error(response.exception.message)
        return
      }
      const data = response.result
      this.items = data
      // console.log(this.items)
      this.loading = false
    }).catch(error => {
      this.loading = false
      console.log(error)
      this.$message.error('获取数据失败...')
    })
  },
  methods: {
    transferToBoolean: function(val) {
      // return val === 'true' ? true : false
      if (val === 'true') {
        return true
      } else {
        return false
      }
    },
    signupExamination: function(activeId, name) {
      const that = this
      that.loading = true
      const curTime = new Date()
      signupExaminationActive(activeId, name, parseTime(curTime.toString()), this.teacherTypeCode, that.noticeProxyCode).then(response => {
        if (response.exception) {
          that.processing = false
          that.$message.error(response.exception.message)
          return
        }
        const data = response.result
        this.items = data
        that.loading = false
      }).catch(error => {
        that.loading = false
        console.log(error)
        that.$message.error('报名失败,请联系管理员')
      })
    },
    showDialog: function(activeId, name, createRoleId) {
      this.signupActiveId = activeId
      this.signupTeacherCode = name
      this.createRoleId = createRoleId
      const formData = new FormData()
      formData.append('roleId', this.createRoleId)
      axios.post('/api/teachers/getNoticeProxyAll', formData).then(response => {
        const data = response.data.result
        for (let i = 0; i < data.length; i++) {
          this.teacherOptions.push({ value: data[i]['code'], label: data[i]['name'] })
        }
      }).catch(error => {
        console.log(error)
        this.$message.error('获取代领监考通知人员失败，请稍后重试')
      })
      this.noticeProxyDialog = true
    },
    signupExaminationWithNoticeProxy: function() {
      const that = this
      that.loading = true
      const activeId = that.signupActiveId
      const name = that.signupTeacherCode
      const curTime = new Date()
      signupExaminationActive(activeId, name, parseTime(curTime.toString()), this.teacherTypeCode, that.noticeProxyCode).then(response => {
        if (response.exception) {
          that.processing = false
          that.$message.error(response.exception.message)
          return
        }
        const data = response.result
        this.items = data
        that.loading = false
        that.noticeProxyDialog = false
      }).catch(error => {
        that.loading = false
        that.noticeProxyDialog = false
        console.log(error)
        that.$message.error('报名失败,请联系管理员')
      })
    }
  }
}
</script>

<style scoped>
.tag{
  text-align: center;
  vertical-align: right
}
</style>

